<!--
 * @Author: lailifang
 * @Date: 2022-03-15 17:14:42
 * @Description: 文件描述
-->
<template>
  <div class="left">
    <left-pie
      :adcode="adcode"
      :timeValue="timeValue"
      @change="handPirChange"
      ref="leftRef"
    />
    <div class="uls">
      <com-box :title="listData.title">
        <div class="content">
          <div class="header">
            <span
              v-for="(item, index) of listData.map"
              class="header-item"
              :key="index"
              :style="`width: ${widthRef[index]}%`"
              >{{ item }}</span
            >
          </div>
          <div class="main">
            <el-scrollbar
              ref="scrollbar"
              height="400px"
              @scroll="handleScroll"
              @mouseover="stopScroll"
              @mouseout="startScroll"
            >
              <ul>
                <li v-for="(item, index) in listData.data" :key="index">
                  <div class="li-div-gap"></div>
                  <div class="li-div">
                    <div :style="`width: ${widthRef[0]}%`" class="icons">
                      <img
                        v-if="item.warnLevel == '01'"
                        src="../../../assets/images/M4/small-icon1.png"
                        alt=""
                      />
                      <img
                        v-if="item.warnLevel == '02'"
                        src="../../../assets/images/M4/small-icon2.png"
                        alt=""
                      />
                      <img
                        v-if="item.warnLevel == '03'"
                        src="../../../assets/images/M4/small-icon3.png"
                        alt=""
                      />
                    </div>
                    <div :style="`width: ${widthRef[1]}%`" class="name">
                      {{ item.name }}
                    </div>
                    <div :style="`width: ${widthRef[2]}%`" class="name">
                      {{ item.regionName }}
                    </div>
                    <div :style="`width: ${widthRef[3]}%`" class="per">
                      {{ item.price }}
                    </div>
                    <div
                      :style="`width: ${widthRef[4]}%`"
                      :class="
                        item.zfud == 0
                          ? 'zfd0'
                          : item.zfud > 0
                          ? 'zfd1'
                          : 'zfd2'
                      "
                    >
                      {{ Math.abs(item.zfud) + '%' }}
                    </div>
                    <div style="width: 100px" class="time">{{ item.time }}</div>
                  </div>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
      </com-box>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  onBeforeUnmount,
  reactive,
  ref,
  watch,
  onMounted
} from 'vue'
import { useStore } from 'vuex'
import leftPie from './leftPie.vue'
import comBox from '@/components/comBox/comBox.vue'
import httpRequest from '@/service'
export default defineComponent({
  name: 'leftTop',
  components: { comBox, leftPie },
  props: {
    adcode: {
      type: String,
      default: ''
    },
    timeValue: {
      type: Array,
      default: () => {
        return []
      }
    },
    warningId: {
      type: String,
      default: ''
    },
    classId: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {
    const store = useStore()
    const listData = reactive({
      title: '',
      map: [],
      data: []
    })
    const widthRef = reactive([14, 17, 16.8, 17, 16, 16])
    const scrollbar = ref()
    let curTop = 0
    let timer: any = null
    let timerFlag = true
    onMounted(() => {
      onScroll()
    })
    const onScroll = () => {
      timer = setInterval(() => {
        if (timerFlag) {
          curTop++
          scrollbar.value?.setScrollTop(curTop)
        }
        if (curTop - scrollbar.value.wrap$.scrollTop > 1) {
          curTop = 0
        }
      }, 50)
    }
    const listApi = () => {
      httpRequest
        .get({
          url: 'M4WarningList',
          params: {
            adcode: props.adcode,
            warningId: props.warningId,
            // startTime: props.timeValue[0],
            // endTime: props.timeValue[1],
            startTime: store.state.globalDate.startDate,
            endTime: store.state.globalDate.endDate,
            classId: props.classId
          }
        })
        .then((res) => {
          listData.title = res.title
          listData.map = res.map
          listData.data = res.data
        })
        .catch(() => {
          console.log('请求失败')
        })
    }
    const stopScroll = () => {
      timerFlag = false
    }
    const startScroll = () => {
      timerFlag = true
      curTop = scrollbar.value.wrap$.scrollTop
    }
    const handleScroll = (pos: any) => {
      curTop = pos.scrollTop
    }
    const handPirChange = (classCode: string) => {
      emit('change', classCode)
    }
    onBeforeUnmount(() => {
      clearInterval(timer)
    })
    watch(
      () => [props.adcode, props.timeValue, props.warningId, props.classId],
      () => {
        listApi()
      }
    )
    const leftRef = ref()
    const refreshData = () => {
      listApi()
      leftRef.value?.refreshData()
    }
    return {
      listData,
      widthRef,
      scrollbar,
      handPirChange,
      handleScroll,
      stopScroll,
      startScroll,
      refreshData,
      leftRef
    }
  }
})
</script>
<style lang="less" scoped>
.left {
  position: relative;
  z-index: 10;
  width: 525px;
  height: 780px;
  .uls {
    width: 100%;
    height: 495px;
    // margin-top: 15px;
    .content {
      width: 100%;
      height: 100%;
      .header {
        display: flex;
        align-items: center;
        width: 500px;
        margin: auto;
        height: 38px;
        background: rgba(0, 160, 233, 0.2);
        .header-item {
          color: #46ede8;
          font-size: 16px;
          font-family: 'SourceHanSansCN';
          text-align: center;
        }
      }
      .main {
        height: calc(100% - 38px);
        ul {
          width: 100%;
          height: 100%;
          padding: 0 15px;
          li {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .li-div-gap {
              width: 100%;
              height: 10px;
            }
            .li-div {
              width: 500px;
              display: flex;
              align-items: center;
              height: 40px;
              div {
                text-align: center;
                font-weight: bold;
              }
              .name {
                color: #04f8fd;
                font-size: 15px;
              }
              .per {
                color: #02a3ff;
                font-size: 16px;
              }
              .time {
                font-size: 16px;
                color: #426aa3;
              }
              .zfd0 {
                position: relative;
                font-size: 16px;
                color: #05ffaa;
              }
              .zfd1 {
                position: relative;
                font-size: 16px;
                color: #ff3a05;
                &::after {
                  position: absolute;
                  content: '';
                  top: 50%;
                  transform: translateY(-50%);
                  width: 10px;
                  height: 15px;
                  background: url('../../../assets/images/M4/rise-icon.png');
                }
              }
              .zfd2 {
                position: relative;
                font-size: 16px;
                color: #05ffaa;
                &::after {
                  position: absolute;
                  content: '';
                  top: 50%;
                  transform: translateY(-50%);
                  width: 10px;
                  height: 15px;
                  background: url('../../../assets/images/M4/low-icon.png');
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
